<script setup type="ts">
import Gua from './components/Gua.vue'
import { get8YYaoBian, getCuoGua, getGua, getHuGua, gua, gua64 } from './data'

// const guaAll = ref(gua64)

const yao = ref('111111')

const bianYao = computed(() => {
  return get8YYaoBian(yao.value)
})
</script>

<template>
  <n-flex :size="50">
    <!-- <div v-for="item in guaAll" :key="item.name"> -->
    <div>
      <div class="text-center font-semibold text-lg">
        {{ getGua(yao).name }}
      </div>
      <div>
        周易：{{ getGua(yao).index + 1 }} 先天：{{ getGua(yao).yaoIndex + 1 }}
      </div>
      <div>
        上爻：{{ getGua(yao).up }} 下爻：{{ getGua(yao).down }}
      </div>
      <Gua v-model:model-value="yao" trigger :height="20" class="w-200px" />
      <div class="mt-15px">
        错卦：{{ getCuoGua(yao).name }}
      </div>
      <Gua :model-value="getCuoGua(yao).yao" :height="20" class="w-200px" />
      <div class="mt-15px">
        互卦：{{ getHuGua(yao).name }}
      </div>
      <Gua :model-value="getHuGua(yao).yao" :height="20" class="w-200px" />
    </div>
    <!-- <Gua v-model:model-value="item.down" :height="20" class="w-200px mt-10px" /> -->
    <!-- </div> -->
  </n-flex>
  <n-flex :size="50">
    <div v-for="item in bianYao" :key="item.name">
      <div class="text-center font-semibold text-lg">
        {{ getGua(item.yao).name }}
      </div>
      <Gua :model-value="item.yao" :height="20" class="w-200px" />
    </div>
  </n-flex>
</template>
